@import '../../../assets/tailwind.css';

.dialogContainer {
    @apply flex min-h-full items-center justify-center p-4 text-center;
}

.panel {
    @apply relative mx-auto w-full max-w-xl rounded-2xl border-[1px] border-[#ffffff07] text-left shadow-2xl backdrop-blur-3xl;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), rgba(255, 255, 255, 0.12);
}

.title {
    @apply mb-2 pr-4 text-2xl font-extrabold tracking-tight;
}

.close_icon {
    @apply h-5 w-5 transition-transform duration-100 group-hover:rotate-90;
}

.dialog_icon {
    @apply mr-4 flex h-10 w-10 items-center justify-center rounded-full;

    &.danger {
        @apply bg-red-500 text-red-50;
    }

    &.warning {
        @apply bg-yellow-600 text-yellow-50;
    }

    &.success {
        @apply bg-green-600 text-green-50;
    }

    &.info {
        @apply bg-zinc-500 text-zinc-50;
    }
}
